<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../css/mui.css"/>
</head>
<body>
	
	<!--下拉刷新容器-->
	<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
	  	<div class="mui-scroll">
	    	<!--数据列表-->
		    <ul id="list" class="mui-table-view">
      	        
		    </ul>
	  	</div>
	</div>
	
	<script id="tpl" type="text/html">
		{{each list}}
		<li class="mui-table-view-cell" data-link="{{$value['link']}}">
        	{{$value['title']}}
        	<p>{{$value['desc']}}</p>
        </li>
        {{/each}}
	</script>
	
    
    <script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/template-web.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	mui.init({
    		pullRefresh: {
    			container: '#refreshContainer',
    			up: {
    				auto: true,
    				callback: getData
    			}
    		}
    	});
    	
    	var page = 0;
    	
    	function getData() {
    		
    		if (page >= 5) {
    			mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
    		} else {
    			mui.get('http://route.showapi.com/109-35', {
	    			showapi_appid: 26444,
		    		showapi_sign: 'e6ed68d43d734b78892a649fedd90cbe',
		    		maxResult: 5,
		    		page: page++
	    		}, function(res) {
	    			if (res && res.showapi_res_code == 0) {
	    				var list = res.showapi_res_body.pagebean.contentlist;
	    				
	    				var tpl = template('tpl', {list: list});
	    				
	    				document.querySelector('#list').innerHTML += tpl;
	    				
	    			} else {
	    				mui.alert(res.showapi_res_error);
	    			}
	    			
	    			
	    			mui('#refreshContainer').pullRefresh().endPullupToRefresh();
	    		}, 'json');	
    		}
    	}
    	
    	
    	mui("#list").on('tap', 'li', function() {
    		var link = this.getAttribute('data-link');
    		console.log(link);
    		
    		var detail = mui.preload({
    			url: 'list2_detail.html',
    			id: 'detail'
    		})
    		
    		console.log(detail);
    		
    		mui.fire(detail, 'ready', {
    			link: link
    		})
    		
    		mui.openWindow({
    			url: 'list2_detail.html',
    			id: 'detail'
    		})
    	})
    </script>
</body>
</html>
